$basic: #673ab7;
$basic-light: #d1c4e9;
$primary: #ffc108;
$primary-light: #ffda6d;

$max-width-1: 480px;
$max-width-2: 880px;

body {
    overflow: hidden;
    
    main {
        width: 100%;

        overflow: hidden;

        #map {
            width: 100%;

            background-color: $basic-light;

            overflow: hidden;

            cursor: move;

            .bee {
                border-style: solid;
                border-radius: 0.75rem;
                background-color: $primary;
                border-color: $primary-light;
            
                position: absolute;
            
                border-width: 0.3rem;

                width: 1.5rem;
                height: 1.5rem;
            }
            
            .hive {
                button {
                    border-radius: 0;
                    border-style: none;

                    position: absolute;
                }
            
                #b {
                    transform: translate(-50%, -50%);
                    transform: rotate(60deg);
                }
            
                #c {
                    transform: translate(-50%, -50%);
                    transform: rotate(300deg);
                }

                #outer {
                    #a, #b, #c {
                        background-color: $primary-light;
                
                        width: 1rem * 1.732;
                        height: 1rem;
                    }
                }

                #inner {
                    #a, #b, #c {
                        background-color: $primary;
                
                        width: 0.7rem * 1.732;
                        height: 0.7rem;

                        margin: 0.25rem;
                    }
                }
            }

            #beijing {
                width: 100%;

                position: absolute;

                overflow: scroll;
                
                img {
                    width: 300rem;

                    margin: 10rem;
                }

                #thc {
                    #A, #B, #C, #a, #b, #c {
                        top: 218rem;
                        left: 158rem;
                    }
                }

                #bjfu {
                    top: 209rem;
                    left: 142rem;
                }

                #ustb {
                    top: 210rem;
                    left: 147rem;
                }

                #buaa {
                    top: 214rem;
                    left: 143rem;
                }

                #bfa {
                    top: 216rem;
                    left: 146rem;
                }

                #bit {
                    top: 219rem;
                    left: 141rem;
                }

                #bucea {
                    top: 222rem;
                    left: 143rem;
                }

                #btbu {
                    top: 224rem;
                    left: 140rem;
                }

                #cuc {
                    top: 224rem;
                    left: 173rem;
                }

                #bisu {
                    top: 224rem;
                    left: 176rem;
                }

                #cnu {
                    top: 227rem;
                    left: 136rem;
                }

                #bjut {
                    top: 232rem;
                    left: 162rem;
                }

                #cmu {
                    top: 236rem;
                    left: 145rem;
                }

                #cueb {
                    top: 239rem;
                    left: 140rem;
                }
            }

            #china {
                width: 100%;

                position: absolute;

                overflow: scroll;

                display: none;

                img {
                    width: 100rem;

                    margin: 10rem;
                }

                #beijing_all {
                    #A, #B, #C, #a, #b, #c {
                        top: 41rem;
                        left: 81rem;
                    }
                }

                #jilin_jlu {
                    top: 31rem;
                    left: 95rem;
                }

                #tianjin_nku {
                    top: 43rem;
                    left: 82rem;
                }

                #shanxi_tyut {
                    top: 48rem;
                    left: 73rem;
                }

                #hubei_whu {
                    top: 60rem;
                    left: 73rem;
                }

                #chongqing_cqu {
                    top: 62rem;
                    left: 65rem;
                }

                #hunan_nudt {
                    top: 67rem;
                    left: 72rem;
                }

                #guangdong_sysu {
                    top: 75rem;
                    left: 79rem;
                }

            }

            #world {
                width: 100%;

                position: absolute;

                overflow: scroll;

                display: none;

                img {
                    width: 150rem;

                    margin: 10rem;
                }

                #china_all {
                    #A, #B, #C, #a, #b, #c {
                        top: 39rem;
                        left: 130rem;
                    }
                }

                #ireland_ucd {
                    top: 33rem;
                    left: 77rem;
                }
            }

            #zoomOut {
                border-style: none;
                border-radius: 0;

                position: fixed;
                top: 6rem;
                left: 0;

                background-color: $basic;

                width: 4rem;
                height: 2rem;

                display: flex;
                justify-content: flex-end;
                align-content: center;

                img {
                    width: 1rem;

                    margin: 0.5rem;
                }
            }
        }
    }
}